<template>
	<!-- 首页 -->
	<view id="home">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<clx-dialog :isShow="dialog.show" @dialogConfirm='removeConfirm' @dialogCancel='removeCancel'
			:content="dialog.content"></clx-dialog>
		<!-- <web-view src="http://192.168.229.229:5151/5_runeTool.html"></web-view> -->
		<!--  is-disabled -->
		<view class="body">
			<view class="tip" :class="bag_runes.length?'above_btns':''">
				{{ $t('home.note.no_complete') }}
			</view>
			<view class="btns_wrapper" v-if="bag_runes.length">
				<view @tap.stop="onEditClick" class="btn_box btn-edit" hover-class="hover">
					<image src="../../static/img/icons/edit.png" mode="aspectFit"></image>
				</view>
				<view @tap.stop="onDelClick" class="btn_box btn-del" hover-class="hover">
					<image src="../../static/img/icons/del.png" mode="aspectFit"></image>
				</view>
				<view @tap.stop="onCalcClick" class="btn_box btn-calc" hover-class="hover">
					<image src="../../static/img/icons/calc.png" mode="aspectFit"></image>
				</view>
			</view>


			<view class="bag">
				<template v-if="bag_runes.length">
					<template v-for="data,index in bag_runes">
						<view class="item-box" :key="'bag_runes'+index">
							<image :src="'/static/img'+data.rune.src" mode="aspectFit"></image>
							<view class="num">{{data.num}}</view>
						</view>
					</template>
				</template>
				<template v-else>
					<view class="empty">{{$t("global.empty")}}</view>

					<view @tap.stop="onAddClick" class="add_btn_box" hover-class="hover">
						<image src="../../static/img/icons/add.png" mode="aspectFit"></image>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	// import idImg from "@utils/identify_image.js";
	import $utils_ from "@/utils/common.js";
	import $cst_ from "@/utils/constant.js";
	import RUNES_DATA from "@/data/runes.js";
	// import $utils_ from "../../utils/common.js";
	export default {
		data() {
			return {
				dialog: {
					title: this.$t('global.note.confirmDialog'),
					show: false,
					content: this.$t('global.note.deleteConfirm')
				}, // 删除操作提示框
				runes: RUNES_DATA,

				/**@type{Map<string,import('@/data/runes.js').Rune}>} @todo 应该使用vux或者全局变量*/
				runesMap: new Map(),
				bag_runes: [],
			}
		},
		// 每一个页面都放，切换语言后进那个页面再加载
		onReady() {
			const _this = this;
			// 设置tabbar文字
			_this.$t('global.tabbar').forEach((el, i) => {
				uni.setTabBarItem({
					index: i,
					text: el
				});
			});
		},
		onLoad() {},
		created() {
			const _this = this;
			_this.runes.forEach((val) => {
				let rune = val;
				this.runesMap.set(val.name, val);
			});


			_this.bag_runes = _this.getUserBagRunes();

			uni.$on("refresh_bag_runes", _this.refresh);
			// console.log(_this.bag_runes);
		},
		mounted() {},
		methods: {
			refresh() {
				const _this = this;
				console.log("refresh...");
				_this.bag_runes = _this.getUserBagRunes();
			},
			// 添加按钮点击事件
			onAddClick: $utils_.debounce(function(el) {
				// console.log(el, this);
				const _this = this;
				uni.navigateTo({
					url: `./addBagRunes`,
					success(res) {
						console.log('跳转到表单页');
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							type: _this.$cst_.OPS.ADD
						});
					}
				});
			}, 500, true),

			// 修改按钮点击事件
			onEditClick: $utils_.debounce(function() {
				// console.log(el,a, this);
				const _this = this;
				// console.log(data);
				uni.navigateTo({
					url: `./addBagRunes`,
					success(res) {
						console.log('跳转到表单页');
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							type: _this.$cst_.OPS.SET,
							data: _this.bag_runes,
						});
					}
				});
			}, 500, true),

			// 删除按钮点击事件
			onDelClick: $utils_.debounce(function(el) {
				// console.log(el, this);
				const _this = this;
				// 打开删除确认框
				_this.dialog.show = true;
			}, 500, true),



			// 计算按钮点击事件 @todo
			onCalcClick: $utils_.debounce(function(el) {
				// console.log(el, this);
				const _this = this;
				// uni.navigateTo({
				// 	url: `./calcResult`,
				// 	success(res) {
				// 		console.log('跳转到结果页');
				// 	}
				// });
				
				uni.showToast({
					title: _this.$t('global.note.pls_lfwt'),
					image: '/static/img/toast/hourglass.png',
					duration: 2000
				});
			}, 500, true),

			closeRemoveDialog() {
				this.dialog.show = false;
			},
			// 取消删除
			removeCancel() {
				this.dialog.show = false;
			},
			// 确认删除
			removeConfirm() {
				const _this = this;
				try {
					// throw new Error("test");
					uni.setStorageSync($cst_.KEY_OF_BAG_RUNES,
						_this.$utils_.JSONStringify([]));


					_this.closeRemoveDialog();
					_this.refresh();
					uni.showToast({
						title: _this.$t('global.note.del_success'),
						image: '/static/img/toast/success.png',
						duration: 1000
					});
				} catch (err) {
					console.error(err);

					_this.closeRemoveDialog();
					_this.refresh();
					uni.showToast({
						title: _this.$t('global.note.del_failed'),
						image: '/static/img/toast/failure.png',
						duration: 2000
					});
				}
			},


			/**
			 * @description 将获取到的用户bag_runes数据加工
			 * @param {Array<{name: string; num: number}>} bagRunes 本地存储的用户数据
			 * @return {Array<{name: string; num: number; rune: import('@/data/runes.js').Rune}>}
			 * @todo 转成全局方法或使用vuex
			 * */
			userBagRunesProcesser(bagRunes) {
				const _this = this;
				let data = [];

				for (let i = 0; i < bagRunes.length; i++) {
					let el = bagRunes[i]
					let obj = {
						...el
					};
					let rune = _this.runesMap.get(el.name);
					if (!rune) {
						console.warn(el.name, " 符石未找到");
						continue;
					}
					obj.rune = rune;
					data.push(obj);
				}

				// console.log(data);

				return data;
			},

			/**
			 * @description  获取userdata : bag_runes
			 * @todo globaldata or vuex
			 * */
			getUserBagRunes() {
				const _this = this;
				try {
					// throw new Error("test");
					let val = uni.getStorageSync($cst_.KEY_OF_BAG_RUNES);

					// console.log("val：", val);
					if (val) {
						let data = $utils_.JSONParse(val);
						let res = _this.userBagRunesProcesser(data);

						return res;

					} else {
						// init
						uni.setStorageSync($cst_.KEY_OF_BAG_RUNES, $utils_.JSONStringify([]));
						console.log("bag_runes init");

						return [];
					}
				} catch (e) {
					console.error(e);
					return [];
				}
			},
		},
		destroyed() {
			console.log("destroyed...");
			uni.$off("refresh_bag_runes");
		}
	}
</script>

<style lang="scss" scoped>
	#home {
		height: 100%;
		background-color: rgb(28, 28, 28);

		.status_bar {
			position: fixed;
			top: 0;
			height: var(--status-bar-height);
			width: 100%;
			background-color: rgb(28, 28, 28);
			// background-color: #f5f5f5; // 防透视.data_area
			// background-color: blue;
			z-index: 99;
		}


		.body {
			// background-color: pink;
			padding-top: var(--status-bar-height);
			height: calc(100% - var(--status-bar-height));
			width: 100%;
			position: relative;

			.tip {
				position: absolute;
				width: 600rpx;
				height: 100rpx;
				text-align: center;
				color: firebrick;
				font-size: 60rpx;
				line-height: 100rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: calc(10% + 480rpx);

				&.above_btns {

					bottom: calc(10% + 480rpx + 120rpx);
				}
			}

			.btns_wrapper {
				// background-color: yellow;
				width: 600rpx;
				height: 100rpx;
				position: absolute;
				bottom: calc(10% + 480rpx);
				left: 50%;
				transform: translateX(-50%);
				margin-bottom: 20rpx;
				display: flex;

				.btn_box {
					// position: absolute;

					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;

					&.btn-edit {
						// left: 0;
						background-color: rgba(255, 144, 0, 0.8);
					}

					&.btn-del {
						// left: 120rpx;
						background-color: rgba(247, 98, 96, 0.8);
					}

					&.btn-calc {
						// left: 240rpx;
						background-color: rgba(0, 122, 255, 0.8);
					}

					uni-image {
						width: 80%;
						height: 80%;
					}

					&.hover {
						transform: scale(1.1) !important;
					}

					&.is-disabled {
						background-color: gray;
						transform: none !important;
					}
				}
			}

			.bag {
				position: absolute;
				width: 600rpx;
				height: 480rpx;
				background-color: rgb(24, 24, 24);
				border: 10rpx solid rgb(66, 66, 64);
				border-radius: 20rpx;
				bottom: 10%;
				left: 50%;
				transform: translateX(-50%);
				padding: 10rpx;
				box-sizing: border-box;

				display: grid;
				grid-gap: 10rpx;
				// grid 行宽自适应 https://juejin.cn/post/6844903565463388168
				grid-template-columns: repeat(5, 1fr);
				grid-template-rows: repeat(4, 1fr);


				.empty {
					position: absolute;
					color: white;
					font-size: 80rpx;
					font-weight: 900;
					width: 100%;
					text-align: center;
					top: 20%;
				}

				.add_btn_box {
					position: absolute;
					bottom: 25%;
					right: 50%;
					transform: translateX(50%);

					z-index: 2;
					background-color: rgba(0, 122, 255, 0.8);
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					uni-image {
						width: 80%;
						height: 80%;
					}

					&.hover {
						transform: translateX(50%) scale(1.1) !important;
					}

					&.is-disabled {
						background-color: gray;
						transform: none !important;
					}
				}

				.item-box {
					// border: 16rpx solid rgb(103, 103, 101);
					border: 4rpx solid rgb(253, 144, 0);
					border-radius: 10rpx;
					background-color: rgb(37, 37, 35);
					position: relative;

					// background-color: yellow;
					uni-image {
						width: 100%;
						height: 100%;
					}

					.num {
						width: 50rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 42rpx;
						font-weight: 900;
						text-align: center;
						position: absolute;
						bottom: 0;
						right: 0;
						color: deeppink;
					}
				}
			}
		}
	}
</style>